import 'ol/ol.css';
import {Map, View} from 'ol'
import {Vector as VectorSource, TileWMS, ImageWMS, TileImage, XYZ as XYZSsource, Cluster} from 'ol/source'
import {Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer, Heatmap as HeatmapLayer} from 'ol/layer'
import {Point, LineString, MultiPolygon, Circle, Polygon} from 'ol/geom'
// 用来添加相关文字描述的
import {Text, Style, Fill, Icon, Circle as CircleStyle, Stroke} from 'ol/style'
import Feature from 'ol/Feature'

import {getBD09ProjByCode} from '../projection'
import sourceTile from '../coordinate-system'

/**
 *
 */
export default class olmap {
  constructor(element, options) {
    if (!this.isDOM(element)) {
      return false;
    }
    this.mapDom = element
    this.extent = []
    this.options = options
    this.init(options);
    this.layerLists = options.layerList || []
    // this.initLayer(this.layerLists);
  }

  /**
   * 初始化地图配置
   */
  init(options) {
    getBD09ProjByCode()
    let layers = this.loadLayers(options.layerList || [])
    this.map = new Map({
      target: this.mapDom, // 地图容器
      layers: [...layers],
      view: new View({
        // 地图中心点
        center: [103.997205, 30.688302],
        // extent: [-90, 90, -180, 180],
        // center: [12959773, 4853101],
        zoom: 10,
        // minZoom: 5,
        // maxZoom: 18,
        // 椭球
        projection: "EPSG:4326",
      }),
    })
  }

  /**
   * 初始化地图图层
   * @param layerLists
   * @returns {boolean}
   */
  initLayer(layerLists) {
    if (!this.map) {
      return false;
    }
    let lists = layerLists
    if (lists && lists.length) {
      lists.forEach((item) => {
        this.loadLayer(item)
      })
    }
  }

  loadLayers(lists) {
    return lists.map((item) => {
      return this.createLayer(item)
    })
  }

  loadLayer(item) {
    // 参数
    let params = JSON.parse(item.params)
    let TileLayerObj = null
    if (item.layertype === 'Tile' && item.sourcetype === 'BDXYZ') {
      TileLayerObj = new TileLayer({});
    }
  }

  createLayer(item) {
    let layer = new TileLayer({
      "code": "Tile",
      "name": "本地卫星图",
    });
    switch (item.layertype) {
      case 'Tile':
        layer = new TileLayer({
          "code": "Tile",
          "name": "本地卫星图",
        });
    }
    let source = {}
    switch (item.sourcetype) {
      case 'GDXYZ':
        source = new XYZSsource({
          // url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
          // url: 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20160321&scaler=2&p=0'
          // url: 'https://maponline3.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20240422&from=jsapi2_0'
          url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
        })
        break;
      case 'BDXYZ':
        source = sourceTile.createBDLayerSource()
    }
    layer.setSource(source)
    layer.code = item.code
    return layer
  }

  createPoint() {
    //新建一个要素
    let newFeature = new Feature({
      //几何信息
      geometry: new Point([103.997205, 30.688302])
    });
    //设置要素的样式
    newFeature.setStyle(new Style({
      image: new CircleStyle({
        radius: 10,
        fill: new Fill({
          color: '#073b7b'
        })
      })
    }));

    // 矢量标注图层
    this.vectorLayer = new VectorLayer({
      source: new VectorSource({
        features: [newFeature]
      })
    });
    this.map.addLayer(this.vectorLayer);
  }

  isDOM(element) {
    return element instanceof HTMLElement;
  }
}
